$(function () {
    var search = location.search;
    if (search) {  //有gid数据 
        //console.log(search);
        var gid = search.split("=")[1];
        //console.log(gid);
        (async function () {
            //console.log(111);
            let result = await searchGoodsById({ gid });
           // console.log(11111,result);

            var { status, data: { goodsName, goodsPrice, goodsId, goodsImg, goodsNameEn, } } = result;
            if (status) {  //有数据 (根据gid能查到数据);
                var leftHTML = `
                                <div class="product_top">
                    <a href="../html/list.html" class="product_all">全部产品</a>
                    <span class="product_space">|</span>
                    <span>${goodsNameEn}</span>
                </div>
                <div class="product_info">
                    <!-- <div class="product_img">
                        <img src="../img/origins_sku.jpg" alt="">
                    </div> -->
                    <div class="wrap">
                        <div class="left">
                            <div class="shadow"></div>
                            <img src="https://www.origins.com.cn/${goodsImg}" alt="" class="smallImg">
                        </div>
                        <div class="right">
                            <img src="https://www.origins.com.cn/${goodsImg}" alt="" class="bigImg">
                        </div>
                    </div>
                    <!-- 商品详情 -->
                    <div class="product_message">
                        <div class="product_en">${goodsNameEn}</div>
                        <div class="product_cn">${goodsName}</div>
                        <a href="javascript:;" class="product_coll">♡ 加入收藏夹</a>
                        <div class="specs">
                            <div class="specs_price">￥${goodsPrice}</div>
                            <select class="specs_num">
                                <option value="1">数量:1</option>
                                <option value="2">数量:2</option>
                                <option value="3">数量:3</option>
                                <option value="4">数量:4</option>
                                <option value="5">数量:5</option>
                                <option value="6">数量:6</option>
                                <option value="7">数量:7</option>
                                <option value="8">数量:8</option>
                                <option value="9">数量:9</option>
                            </select>
                        </div>
                        <a href="javascript:;" class="addcar">添加到购物车</a>
                        <div class="delivery">全场任购尊享顺丰速达&精美礼盒包装</div>
                        <div class="specs_info_box">
                            <div class="specs_info">产品详情</div>
                        </div>

                        <div class="specs_detail">
                            <br>
                            套装包含正装产品：<br>
                            韦博士灵芝焕能好底子精华水kakao限定版 200ml<br>
                            灵芝焕能好底子强韧乳 100ml<br>
                            <br>
                            套装包含礼赠：<br>
                            灵芝水30ml<br>
                            强韧乳30ml<br>
                            灵芝修护精华5ml<br>
                            灵芝修护精华15ml<br>
                            杨紫明信片<br>
                            定制礼盒<br>
                            <br>
                            套装包含正装产品：<br>
                            韦博士灵芝焕能好底子精华水kakao限定版 400ml<br>
                            灵芝焕能好底子强韧乳 100ml<br>
                            <br>
                            套装包含礼赠：<br>
                            灵芝水30mlx2<br>
                            强韧乳30ml<br>
                            灵芝面膜15ml<br>
                            灵芝修护精华15ml<br>
                            杨紫明信片<br>
                            定制礼盒<br>
                        </div>
                    </div>
                </div>
                
                
                
                `

                $(".product").html(leftHTML);

                var wrap = document.querySelector(".wrap");
                var left = document.querySelector(".left");
                var shadow = document.querySelector(".shadow");
                var smallImg = document.querySelector(".smallImg");
                var right = document.querySelector(".right");
                var bigImg = document.querySelector(".bigImg");
                var xMax = null;
                var yMax = null;
                var scale = null;
                left.onmouseenter = function () {
                    shadow.style.display = "block";  //鼠标划入时显示
                    right.style.display = "block";
                    xMax = left.clientWidth - shadow.clientWidth; //阴影横向移动的最大距离
                    yMax = left.clientHeight - shadow.clientHeight;   //阴影纵向移动的最大距离
                    scale = bigImg.clientHeight / smallImg.clientHeight;  //放大图片的比例
                }
                left.onmouseleave = function () {
                    shadow.style.display = "none"; //划出时隐藏
                    right.style.display = "none";
                }
                left.onmousemove = function () {
                    var e = e || window.event;
                    var x = e.pageX - wrap.offsetLeft - shadow.clientWidth / 2; //监控移动的横向坐标
                    var y = e.pageY - wrap.offsetTop - shadow.clientHeight / 2; //监控移动的纵向坐标
                    if (x < 0) x = 0;
                    if (x > xMax) x = xMax;
                    if (y < 0) y = 0;
                    if (y > yMax) y = yMax;
                    shadow.style.left = x + "px";   //赋值
                    shadow.style.top = y + "px";

                    bigImg.style.left = -x * scale + "px";
                    bigImg.style.top = -y * scale + "px";
                }



            }
        })()

    }


    $(".pro-info-text-a").click(function(){
        $(".or_pro-info-pic").toggle();
    })



   




    loadList();
    async function loadList() {

        var result = await searchRecomGoods();
        //console.log(result);
        var { status, list } = result;
        //console.log(status);
        if (status) {
            var html = "";
            list.forEach(({ id, goodsId, goodsName, goodsPrice, goodsImg, goodsNameEn }) => {
                html += `
                    <li>
                    <a href="../html/detail.html?gid=${goodsId}"><img src="https://www.origins.com.cn/${goodsImg}" alt=""></a>
                    <div class="brand_en"><a href="../html/detail.html?gid=${goodsId}">${goodsNameEn}</a></div>
                    <h2 class="brand_cb"><a href="../html/detail.html?gid=${goodsId}">${goodsName}</a></h2>
                    <div class="price">￥${goodsPrice}</div>
                    <div class="func">
                        <div class="addcar"><a href="../html/detail.html?gid=${goodsId}">添加到购物车</a></div>
                        <div class="detail"><a href="../html/detail.html?gid=${goodsId}">产品详情</a></div>
                    </div>
                </li>
                `
            })
            $(".goods").html(html);
        }
    }


    

    $(document).on("click", ".addcar", async function () {
        var user = getCookie("lgc");
        if(user){
            var buyNum = $(".specs_num").val();
            var result = await addShoppingCar({user,goodsId:gid,buyNum});
            var {status} = result;
            if(status){
                if(confirm("购买成功，是否进入购物车？")){
                    location.href="../html/shoppingcar.html";
                }
            } else {
                alert ("系统繁忙，请稍后...")
            }
        }
        
        

    })

   



})